<footer id="footer">
    <div class="wrapper">
    	<div class="f_logo">
        	<img src="<?php echo HResponse::uri(); ?>images/about_logo.jpg" class="hidden-xm6" />
            <div class="f_logo_txt"><?php echo $siteCfg['copyright']; ?><br />Design: <a href="http://www.nsoso.com" target="_blank">Nsoso.com</a></div>
        </div>
        <div class="hidden-xm6">
        <div class="f_quick">
        	<div class="f_quick_th">Quick navigation</div>
            <a href="/index.php/article?id=666" class="f_quick_a">MUZIK</a>
            <a href="/index.php/cate?parent_id=810" class="f_quick_a f_quick_b">EYEGLASSES</a>
			<a href="/index.php/cate?parent_id=820" class="f_quick_a f_quick_b">SUNGLASSES</a>
            <a href="/index.php/article?parent_id=724" class="f_quick_a f_quick_b">EXHIBITION</a>
            <a href="/index.php/article?id=665" class="f_quick_a f_quick_d">CONTACT</a>
            <div class="f_compc">
            	<a href="http://www.facebook.com" target="_blank"><img src="<?php echo HResponse::uri(); ?>images/book_01.jpg" /></a>
                <a href="http://www.tweet.com" target="_blank"><img src="<?php echo HResponse::uri(); ?>images/book_02.jpg" /></a>
                <a href="https://instagram.com/" target="_blank"><img src="<?php echo HResponse::uri(); ?>images/book_03.jpg" /></a>
                <a href="http://ca.youtube.com/" target="_blank"><img src="<?php echo HResponse::uri(); ?>images/book_04.jpg" /></a>
            </div>
            </div>
        </div>
        <div class="f_complef">
            <p class="hidden-xm6">Get the inside scoop on new frames, <br />events, and more</p>
            <form action="<?php echo HResponse::url('index/postemail'); ?>" id="search-form" class="form">
                <div class="f_searchbox">
                    <input type="text" id="home-searchInput" name="email" value="" class="form-input" placeholder="E-mail" attr="E-mail" >
                    <input type="submit" class="form_submit" value=""/>
                </div>
            </form>
        </div>
    </div>
    <script>
        function chclass(classname)
        {
            document.getElementsByClassName(classname)[0].className='form-input2';
        }
        Array.prototype.remove = function(val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };

        var newid    = "<?php echo I('is_new') ?: 1; ?>";
        var keyword  = "<?php echo I('keyword') ?: ''; ?>";
        var parentId = "<?php echo I('parent_id'); ?>";
        var color    = "<?php echo I('color'); ?>";
        var shape    = "<?php echo I('shape'); ?>";
        var rim      = "<?php echo I('rim'); ?>";
        var mater    = "<?php echo I('mater'); ?>";
        var cate    = "<?php echo I('cate'); ?>";

        $(".colorCircle").mouseover(function(){
            $(this).next().toggle();
        });

        $(".colorCircle").mouseout(function(){
            $(this).next().toggle();
        });

        // click cate
        $('.cate').on('click', function() {
            $('.header_p').html($(this).html());
            $('#tag-item-cate').val($(this).attr('data-id'));
            $('#tag-list-form').submit();
        });

        // click color
        $('.colorCircle').on('click', function() {
            var name = $(this).attr('data-name');
            var id   = $(this).attr('data-id');
            var color= $('#tag-item-color').val();
            var html = '<div class="ListDefa_item color-tag" data-id="' + id + '"><span class="ListDefa_name">' + name + '</span></div>';
            color    = color == '' ? id : color + ',' + id;
            $('#tag-item-color').val(color);
            $('.filterList_wrap').append(html);
            $('#tag-list-form').submit();
        });

        //click shape
        $('.shape-checkbox').on('click', function() {
            var shapeId = $(this).val();
            if ($(this).is(':checked')) {
                var shape = $('#tag-item-shape').val();
                shape    = shape == '' ? shapeId : shape + ',' + shapeId;
                $('#tag-item-shape').val(shape);
            } else {
                var data = $('#tag-item-shape').val();
                data     = data.split(',');
                data.remove(shapeId);
                $('#tag-item-shape').val(data);
            }
            $('#tag-list-form').submit();
        });

        //click rim
        $('.rim-checkbox').on('click', function() {
            var rimId = $(this).val();
            if ($(this).is(':checked')) {
                var rim = $('#tag-item-rim').val();
                rim    = rim == '' ? rimId : rim + ',' + rimId;
                $('#tag-item-rim').val(rim);
            } else {
                var data = $('#tag-item-rim').val();
                data     = data.split(',');
                data.remove(rimId);
                $('#tag-item-rim').val(data);
            }
            $('#tag-list-form').submit();
        });

        //click mater
        $('.mater-checkbox').on('click', function() {
            var materId = $(this).val();
            if ($(this).is(':checked')) {
                var mater = $('#tag-item-mater').val();
                mater    = mater == '' ? materId : mater + ',' + materId;
                $('#tag-item-mater').val(mater);
            } else {
                var data = $('#tag-item-mater').val();
                data     = data.split(',');
                data.remove(materId);
                $('#tag-item-mater').val(data);
            }
            $('#tag-list-form').submit();
        });

        $('.ListDefa_item').on('click', function() {
            var tag  = $(this).attr('data-tag');
            var data = $('#tag-item-' + tag).val();
            data     = data.split(',');
            var id   = $(this).attr('data-id');
            data.remove(id);
            $('#tag-item-' + tag).val(data);
            $('#tag-list-form').submit();
        });

        $(".sidebar_Collapse").on("click",function(){
            $(this).next().slideToggle();
            $(this).children(".sid_icon").toggleClass("curr");
        })
    </script>
</footer>

